<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4">
        <el-tabs
          v-model="activeName"
          style="background-color: white"
          type="card"
        >
          <el-tab-pane label="机构" name="zzjg">
            <el-row style="position: relative">
              <el-col
                :span="25"
                style="overflow: auto; width: 100%"
                :style="{ height: heightTree }"
              >
                <el-tree
                  :props="props"
                  :load="loadNode"
                  lazy
                  :expand-on-click-node="false"
                  @node-click="itemClick"
                  :highlight-current="true"
                  style="
                    min-width: 100%;
                    display: inline-block;
                    background-color: transparent;
                  "
                >
                  <span slot-scope="{ node, data }">
                    <span>
                      <i v-bind:class="data.icon"></i>{{ node.label }}
                    </span>
                  </span>
                </el-tree>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="查询">

          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="20">
        <div style="padding: 10px 10px; background-color: white">
          <el-select
            v-model="AS0119"
            placeholder="请选择"
            style="margin-bottom: 10px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="findType" placeholder="人选类别查询">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>

        <vxe-table
          ref="mytable"
          :height="heightY"
          :data="articlesData"
          :align="(allAlign = 'left')"
          :resizable="true"
          style="width: 100%; margin-top: 10px"
          border
          highlight-current-row
          @current-change="selectChange"
          show-overflow
        >
          <vxe-column field="xingming" title="姓名" sortable width="101" allAlign="left"></vxe-column>
          <vxe-column field="gongzuo" title="工作单位" width="100"></vxe-column>
          <vxe-column field="zhiwu" title="职务" width="90"></vxe-column>
          <vxe-column field="minzu" title="民族" width="150"></vxe-column>
          <vxe-column field="xianren" title="任现职时间" width="180"></vxe-column>
          <vxe-column field="rudang" title="入党时间" width="140"> </vxe-column>
          <vxe-column field="jiguan" title="籍贯" width="130"></vxe-column>
          <vxe-column field="chushengdi" title="出生地" width="140"></vxe-column>
          <vxe-column field="zzxl" title="最高在职学历"  width="140"></vxe-column>
          <vxe-column field="zzxwxx" title="院校系专业"  width="180"></vxe-column>
          <vxe-column field="zyjszw" title="专业技术职务" width="140"></vxe-column>
          <vxe-column field="zzxw" title="最高在职学位" width="140"></vxe-column>
          <vxe-column field="zzxlxx" title="院校系专业" width="180"></vxe-column>
          <vxe-column title="操作" fixed="right" width="200">
          <template #default>
            <el-button type="primary" size="medium" plain>浏览</el-button>
          </template>
        </vxe-column>
        </vxe-table>
        <div class="row" style="background: #fff">
          <div class="col-sm text-sm-left text-left3 pt-3">
            <vxe-pager
              background
              align="left"
              :current-page.sync="currentPage"
              :page-size.sync="perPage"
              :total="totalItems"
              :layouts="[
                'PrevJump',
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total',
              ]"
              @page-change="handleSizeChange"
            >
            </vxe-pager>
          </div>
        </div>
      </el-col>
    </el-row>
    <div></div>
  </div>
</template>
<script>
export default {
    data(){
      return {
        activeName:"zzjg",
        AS0119:"全部",
        findType:"全部",
        heightY: window.innerHeight - 275 + 'px',
        heightTree: window.innerHeight - 220 + 'px',
        articlesData:[
          {
            xingming:"张三",
            gongzuo:'有限集团',
            zhiwu:'玩',
            minzu:"汉",
            xianren:'ceo',
            rudang:'2020-5-20',
            jiguan:'山东',
            chushengdi:'山东',
            zzxl:'硕士',
            zzxwxx:"负责工作",
            zyjszw:'啊实打实',
            zzxw:'二人突然',
            zzxlxx:'设计覅我',
          }
        ],
        currentPage:1,
        perPage:20,
        totalItems:0,
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'leaf'
        },
        options: [{
          value: '选项1',
          label: '选项1'
        }, {
          value: '选项2',
          label: '选项2'
        }],
      }
    },
    methods:{
      selectChange(){

      },
      // 懒加载树
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: '东海市' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [{
            name: '市委',
            leaf: true
          }, {
            name: '未匹配人员',
            leaf: true
          }];

          resolve(data);
        }, 500);
      },
      // 点击选择树
      itemClick(){

      },
      // 点击分页
      handleSizeChange(){

      },
    }
}
</script>

<style scoped>
.swiper-container {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #909399; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 15px; /* 设置按钮大小 */
}

.customRoot-icon {
  width: 20px;
  height: 16px;
  display: inline-block;
}

.customParent-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.customChildren-icon {
  width: 20px;
  height: 18px;
  display: inline-block;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0em;
  fill: currentColor;
  overflow: hidden;
}
>>> .vxe-header--column .vxe-cell--title {
  font-size: 18px;
  font-weight: normal;
  /* color:#909399; */
  font-family: "微软雅黑";
}
>>> .vxe-cell--label {
  font-size: 16px;
  font-family: "微软雅黑";
}
>>> .vxe-table--render-default .vxe-cell {
  font-size: 16px;
  font-family: "微软雅黑";
}
</style>
